* {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

body {
    background: rgb(255, 255, 255);
}

.warp {
    margin: 0 auto;
    height: 40px;
    padding: 0;
    width: 1200px;

}

.box {
    width: 100%;
    height: 40px;
    margin: 0;
    /* background-image: url(../img/top.jpg); */
    background: #efefef;
    /* 下边框线 */
    border-bottom: 1px solid #c4c4c4;
    /* position: fixed 固定定位 */
    position: fixed;
    top: 0;
    transition: top 0.3s ease-in-out;
}

.top ul li {
    float: left;
    list-style: none;
    padding: 0 3px;
    line-height: 40px;
}

.text {
    color: rgb(255, 174, 0);
}

.top-rigth {
    float: right;
    list-style: none;
    padding: 0 5px;
    line-height: 40px;
}

.top-rigth a {
    /* 去掉下划线 */
    text-decoration: none;
    color: black;
}
.top-rigth a input {
    width: 10px;
    background-color: red;
}
.warp-manbu {
    width: 1200px;
    height: 121px;
    background: rgb(255, 255, 255);
    margin-top: 45px;

}

.warp-manbu a {
    line-height: 150px;
}

.manbu-left img {
    width: 300px;
    height: 100px;
    margin-top: 5px;

}

.warp .manbu-rigth img {
    float: right;
    height: 121px;
    width: 810px;
}

.daohang {
    width: 100%;
    height: 50px;
    background: rgb(181, 3, 3);
    float: left;
    margin-top: 3px;

}

/* 导航条 */

.nav {
    width: 100%;
    height: 50px;
    /* border: 10px red solid; */
    line-height: 50px;
    /* margin: 10px auto; */
    background-color: rgb(0, 0, 0);
    display: flex;
    text-align: center;
    /* justify-content: center; */
    /* 空白分布到元素中间   */
    /* justify-content: space-around; */
}
.nav a{
    /* 取消下划线 */
    text-decoration: none;

}
.nav li {
    /* 这个非常重要，设置完以后，ul模块就自动水平居中，撑满nav元素 */
    /* flex-grow: 1; */
    width: 171.5px;
    background-color: rgb(181, 3, 3);
    transition: all 1s;
    display: block;
    color: rgb(246, 246, 246);
    /* 这个就是去掉文字下划线 */
    font-size: 20px;

}

.nav li:hover {
    background-color: #ffffff;
    color: #000000;
}

/* 导航条 end*/

.yiyuan {
    height: 150px;
    width: 100%;
    background: rgb(0, 255, 0);
    float: left;
    margin-top: 5px;
    height: 120px;

}

.top-rigth-go {
    width: 20px;
    height: 20px;
    position: relative;
    top: 4px;
}

/* 最新上架 */
.zuixing {
    width: 100%;
    height: 40px;
    background-color: rgb(255, 136, 0);
    float: left;
    margin-top: 5px;
}

.zuixing p {
    line-height: 40px;
    margin: 0 10px;
    color: #fff;
    font-weight: 600;
    transition: all 1s;
}

.zuixing p:hover {
    color: red;
    cursor: pointer;
}

.zuixing-box {
    width: 100%;
    height: 258px;
    background: rgb(255, 255, 255);
    float: left;
    /* 把容器设置为弹性盒子 */
    display: flex;
    /* 这个属性就是让盒子内的元素两边紧挨着边框线，中间元素均匀平铺 
    justify-content:space-between;

    这个就是把弹性盒子里面的所有元素上下居中对齐
    align-items: center;
    */
    justify-content: space-between;
}

.yifu {
    width: 160px;
    height: 190px;
    background: rgb(255, 255, 255);
    float: left;
    margin-top: 5px;
    /* margin-left: 9.5px; */
    border: 1px solid rgb(209, 209, 209);
    transition: all 0.4s;
}
.yifu:hover{
   box-shadow:  0 0 1px rgb(0, 0, 0);
}
.yifu img {
    padding: 5px;
    box-sizing: 0 0 10px  rgb(166, 166, 166);

}

.yifu-text {
    width: 160px;
    height: 100px;
    /* background: rgb(255, 255, 255); */
    float: left;
}

.yifu-text .p1 {
    float: left;
    color: rgb(226, 21, 21);
    font-weight: 600;
}

.yifu-text .p2 {
    float: left;
    margin-left: 10px;
    font-size: 10px;
    color: #c4c4c4;
    margin-top: 3px;
}

.yifu-text .p3 {
    float: left;
    font-size: 10px;
    font-weight: 600;

}

.yifu-tupian {
    width: 100%;
    height: 353px;
    background-color: rgb(255, 255, 255);
    float: left;
    margin-top: 5px;
    display: flex;
}
.yifu-tupian img{
    flex-grow: 1;
}


/* 最新上架end */

/* 影院热映 */
.zuixing-1 {
    width: 100%;
    height: 40px;
    background-color: rgb(133, 190, 0);
    float: left;
    margin-top: 5px;
}

.zuixing-1 P {
    line-height: 40px;
    margin: 0 10px;
    color: #fff;
    font-weight: 600;
    transition: all 1s;

}

.zuixing-1>P:hover {
    color: red;
    cursor: pointer;

}

.movi {
    width: 381px;
    height: 320px;
    background: rgb(242, 242, 242);
    float: left;
    margin-top: 10px;
    text-align: center;
}

.movi-p2 {
    font-size: 10px;
    color: #6b6b6b;
}

.movi-s {
    width: 810px;
    height: 150px;
    /* background: red; */
    float: left;
    margin-top: 10px;
    margin-left: 8px;
}

.movi-s1 {
    width: 180px;
    height: 150px;
    background: rgb(242, 242, 242);
    transition: all 0.2s linear;
    float: left;
}

.movi-s .movi-s1 {
    margin-left: 22.5px;
}

.movi-s1:hover {
    /* 鼠标点击移动的时候往Y轴也就是右边移动2个像素 */
    transform: translateY(-2px);
    /* 块元素阴影 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.movi-s1 p {
    text-align: center;
    margin-top: 3px;
}

.movi-s1-text1 {
    font-size: 10px;
}

.movi-s1-text2 {
    font-size: 10px;
    color: #a5a5a5;
}

.movi-x {
    width: 810px;
    height: 150px;
    /* background: red; */
    float: left;
    margin-top: 18px;
    margin-left: 8px;
}

.movi-x .movi-s1 {
    margin-left: 22.5px;
}

.movi-zp {
    width: 100%;
    height: 368px;
    background: rgb(255, 255, 255);
    float: left;
    display: flex;
}
.movi-zp img{
    flex-grow: 1;
}
.movi-zp-1 {
    width: 376.5px;
    height: 368px;
}


/* 影院热映end */

/* 今日美食 */
.foot {
    width: 100%;
    height: 40px;
    background-color: rgb(255, 102, 0);
    float: left;
    margin-top: 5px;
}

.foot P {
    line-height: 40px;
    margin: 0 10px;
    color: #fff;
    font-weight: 600;
    transition: all 1s;
}

.foot P:hover {
    color: red;
    cursor: pointer;
}

.warp-table {
    width: 100%;
    height: 590px;
    background: rgb(255, 255, 255);
    float: left;
    margin-top: 10px;
    border-width: 1px;
    border-color: #cacaca;
    border-style: solid;
}

.warp-table-s {
    width: 100%;
    height: 295px;
    /* background: red; */
    float: left;

}

.warp-table-kuai {
    width: 240px;
    height: 275px;
    background: rgb(254, 254, 254);
    margin-top: 20px;
    margin-left: 48px;
    float: left;

}
/* 因为之前没有用A标签，所以只能单独给鼠标经过变成抓书效果了 */
.warp-table-kuai:hover{
    cursor: pointer;
}

.warp-table-kuai samp {
    color: rgb(255, 115, 0);
    font-size: 20px;
    font-weight: bold;
    float: left;
    margin-top: 5px;
    margin-left: 5px;
}

.warp-table-kuai p {
    float: right;
    color: #b8b8b8;
    font-size: 10px;
    margin-top: 6px;
    margin-left: 3px;
}

.bottom {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    font-weight: 450;
    background: rgb(223, 223, 223);
    margin-top: 5px;
    transition: all 0.4s;

}
.warp-table-kuai div:hover{
    text-shadow: 0 0 10px rgba(109, 109, 109, 0.779);
}
.warp-table-kuai .table-text {
    float: right;
    margin-top: 11px;
    font-size: 12px;
    font-weight: 300;
    margin-right: 15px;
    color: #b8b8b8;
}

.warp-table-x {
    width: 100%;
    height: 295px;
    /* background: red; */
    float: left;
}

/* 今日美食end */

/* 底部 */
.dibu {
    width: 100%;
    height: 100px;
    background: rgb(239, 239, 239);
    float: left;
    margin-top: 20px;
    border-top: 3px solid rgb(25, 203, 12);
}

.dibu p {
    text-align: center;
    font-size: 15px;
}
.dibu p a:hover{
    color: rgb(255, 135, 7);
}
.dibu-text {
    margin-top: 10px;
}
.dibu p a { 
    /* 去掉下划线 */
    text-decoration: none;
    color: #000000;
}
.dibu img{
    /* 把img标签变成一个元素，就可以移动这个元素了 */
    display: block;
    /* 自动居中 */
    margin: 0 auto;
}
/* 底部end */